/*
 * @Description: 
 * @Version: 2.0
 * @Author:  
 * @Date: 2022-04-02 12:58:32
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 15:53:49
 */
import './css/EmployeeData.css'
import React, { useState, useRef, } from 'react'
import { Row, Col, Form, Input, Button, Select, Radio, DatePicker, Tooltip } from 'antd'
import {
  PlusSquareOutlined,
  CheckOutlined,
  QuestionOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined
} from '@ant-design/icons';
import moment from 'moment';
export default function EmployeeData(props) {
  const { Option } = Select;
  const { TextArea } = Input;
  // const { userInfo } = props
  const user = {
    userAccount: '110',
    password: '123',
    department: 0,
    isDirector: false,
    userImg: '',
    customer_limit_num: 0,
    phone: '110',
    realName: '陈元明',
    repeatPassword: '',
    role_auth: '',
    // 提成
    commission: '',
    // 头像预览
    user_img_preview: '',
    email: '',
    birthday: '2020-04-12',
    ID: '',
    hometown: '',
    EmergencyContact: '',
    EnterCompany: '',
    HomeAddress: '',
    emergencyCall: '',
    introduce: '',
    signature: '',
    departureStatus: '',
    departureTime: '',
    departureCause: ''

  }
  // 部门
  const departList = [
    {
      id: 0,
      name: '总经办',
    },
    {
      id: 1,
      name: '业务部',
    }
  ]
  // 性别
  const sex = [
    { label: '男', value: '1' },
    { label: '女', value: '0' },
  ]
  // 角色权限
  const roleAuthList = [
    {
      id: 0,
      name: '部门主管'
    },
    {
      id: 1,
      name: '小兵'
    }
  ]
  // 设置部门主管
  const setDeptDirectorBtn = useRef()
  const setDeptDirectorSta = useRef()
  // 显示隐藏用户详情信息
  const isShowUserWrap = useRef()
  const [userInfo, setUserInfo] = useState(user)
  // 是否展开用户详情信息
  const [isShowUser, setIsShowUser] = useState(false)

  // 改变性别
  function changeSex(e) {
    console.log('radio3 checked', e.target.value);
    userInfo.sex = e.target.value
    setUserInfo({ ...userInfo })
  };
  // 处理生日
  function handleBirthdayChange(date, dateString) {
    console.log(date, dateString);
  }
  // 设置部门主管
  function setDeptDirector() {
    userInfo.isDirector = !userInfo.isDirector
    setUserInfo({ ...userInfo })
    console.log(userInfo.isDirector);
    console.log(setDeptDirectorSta.current);
    if (userInfo.isDirector === true) {
      setDeptDirectorBtn.current.style.backgroundColor = '#5cad69'
      setDeptDirectorSta.current.style.color = '#5cad69 '
    } else {
      setDeptDirectorBtn.current.style.backgroundColor = '#d2d2d2'
      setDeptDirectorSta.current.style.color = '#c2c2c2 '
    }
  }
  // 显示隐藏用户信息
  function changeIsShowUser() {
    setIsShowUser(!isShowUser)
    console.log(isShowUser);
    if (isShowUser === false) {
      isShowUserWrap.current.style.color = 'black'
      isShowUserWrap.current.style.fontWeight = 'normal'
    } else {
      isShowUserWrap.current.style.color = 'red'
      isShowUserWrap.current.style.fontWeight = 'bold'
    }
  }
  // 改变离职状态
  function changeDepartureStatus(e) {
    console.log(e.target.value);
  }
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  return (
    <>
      <Row>
        <Col span={24} className='EmployeeData_title'>基本信息</Col>
      </Row>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        // onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Row>
          <Col span={12} className='EmployeeData_left'>
            {/* 登录账号 */}
            <Col span={24}>
              <Form.Item
                label="登录账号"
                name="userAccount"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input value={userInfo.userAccount} />
              </Form.Item>
            </Col>
            {/* 登录密码 */}
            <Col span={24}>
              <Form.Item
                label="登录密码"
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
              >
                <Input.Password value={userInfo.password} />
              </Form.Item>
            </Col>
            {/* 所在部门 */}
            <Col span={24}>
              <Form.Item
                className='emp_dep_row'
                label="所在部门"
                name="department"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item>
                    <Select defaultValue={userInfo.department} onChange={handleChange}>
                      {
                        departList.map(item => {
                          return <Option value="item.id">{item.name}</Option>
                        })
                      }
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Button className='dept_row_addBtn'> <PlusSquareOutlined />新增</Button>
                  </Form.Item>
                  <Form.Item className='dept_row_setDepBtn_wrap'>
                    <Button className='dept_row_setBtn' ref={setDeptDirectorBtn} onClick={setDeptDirector}><span style={{ color: 'white' }}>设置为部门主管</span></Button>
                    <CheckOutlined ref={setDeptDirectorSta} className='dept_row_setDepBtn_icon' />
                    <Tooltip title="部门主管可以看到本部门所有客户！" className='dept_row_setDepBtn_icon2_title'>
                      <QuestionOutlined className='dept_row_setDepBtn_icon2' />
                    </Tooltip>
                  </Form.Item>
                </Col>
              </Form.Item>
            </Col>
            {/* 客户数量限制 */}
            <Col span={24}>
              <Form.Item
                className='emp_dep_row'
                label="客户数量限制"
                name="customerLimitNum"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item>
                    <Input value={userInfo.customer_limit_num} />
                  </Form.Item>
                  <Form.Item>
                    <QuestionOutlined className='dept_row_setDepBtn_icon2' />
                  </Form.Item>
                  <Form.Item>
                    <span className='dept_row_setDepBtn_span'>0为不限制</span>
                  </Form.Item>
                </Col>
              </Form.Item>
            </Col>
            {/* 头像 */}
            <Col span={24}>
              <Form.Item
                label="头像"
                name="user_img"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <div className='img_wrap'>
                  {userInfo.userImg !== '' ? <img src={userInfo.userImg}></img> : <Button className='emp_file_btn'>选择文件</Button>}
                </div>
              </Form.Item>
            </Col>
            {/* 手机号码 */}
            <Col span={24}>
              <Form.Item
                label="手机号码"
                name="phone"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input value={userInfo.phone} className='emp_phone_input' />
              </Form.Item>
            </Col>
            {/* 性别 */}
            <Col span={24}>
              <Form.Item
                label="性别"
                name="sex"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Radio.Group
                  options={sex}
                  onChange={changeSex}
                  value={userInfo.sex}
                  optionType="radio"
                  buttonStyle="solid"
                />
              </Form.Item>
            </Col>
          </Col>
          <Col span={12} className='EmployeeData_right'>
            {/* 真实姓名 */}
            <Col span={24}>
              <Form.Item
                className='EmployeeData_right_input  '
                label="真实姓名"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item name="realName">
                    <Input value={userInfo.realName} />
                  </Form.Item>
                  <Form.Item>
                    <Tooltip title="更新所有记录！慎重！" className='dept_row_setDepBtn_icon2_title'>
                      <QuestionOutlined className='dept_row_setDepBtn_icon2' />
                    </Tooltip>
                  </Form.Item>
                </Col>
              </Form.Item>
            </Col>
            {/* 重复密码 */}
            <Col span={24}>
              <Form.Item
                label="重复密码"
                className='EmployeeData_right_input  '
                name="repeatPassword"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item>
                    <Input value={userInfo.repeatPassword} />
                  </Form.Item>
                  <Form.Item>
                    <span className='repeat_pass_title'>不修改，请留空!</span>
                  </Form.Item>
                </Col>

              </Form.Item>
            </Col>
            {/* 角色权限 */}
            <Col span={24}>
              <Form.Item
                label="角色权限"
                className='EmployeeData_right_input  '
                name="role_auth"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item>
                    <Select defaultValue={userInfo.role_auth} style={{ width: 120 }} onChange={handleChange}>
                      {
                        roleAuthList.map(item => {
                          return <Option value="item.id">{item.name}</Option>
                        })
                      }
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Button className='dept_row_addBtn'> <PlusSquareOutlined />新增</Button>
                  </Form.Item>
                </Col>

              </Form.Item>
            </Col>
            {/* 员工提成 */}
            <Col span={24}>
              <Form.Item
                label="员工提成"
                className='EmployeeData_right_input  '
                name="commission"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Col span={24} className='EmployeeData_dept_row'>
                  <Form.Item>
                    <Input className='commission_input' value={userInfo.commission} />
                  </Form.Item>
                  <Form.Item>
                    <Tooltip title="允许数值为0.01%~100%" className='dept_row_setDepBtn_icon2_title'>
                      <QuestionOutlined className='dept_row_setDepBtn_icon2' />
                    </Tooltip>
                  </Form.Item>
                  <Form.Item className='commission_span'>
                    <span>(允许数值为0.01%~100%)</span>
                  </Form.Item>
                </Col>
              </Form.Item>
            </Col>
            {/* 头像预览 */}
            <Col span={24}>
              <Form.Item
                label="头像预览"
                className='EmployeeData_right_input  '
                name="preview"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <div className='user_img_preview_wrap'>
                  <img src={userInfo.user_img_preview} alt="" />
                </div>
              </Form.Item>
            </Col>
            {/* email */}
            <Col span={24}>
              <Form.Item
                label="E-mail"
                className='email'
                name="commission"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input className='email_input' value={userInfo.email} />
              </Form.Item>
            </Col>
            {/* 生日 */}
            <Col span={24}>
              <Form.Item
                label="生日"
                className='EmployeeData_right_input  '
                name="birthday"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <DatePicker className='birthday_datePicker' defaultValue={moment(userInfo.birthday, 'YYYY/MM/DD')} onChange={handleBirthdayChange} />
              </Form.Item>
            </Col>
          </Col>
          <Col span={24} className='isShowUser' >
            <div onClick={changeIsShowUser} ref={isShowUserWrap}>
              {isShowUser === false ? <span><VerticalAlignBottomOutlined />展开用户详细信息</span> : <span><VerticalAlignTopOutlined />展开用户详情信息</span>}
            </div>
          </Col>
          {/* 用户详情 */}
          <Col span={24}>
            {isShowUser === false ? <></> : <>
              <Row >
                <Col span={12} className='EmployeeData_left'>
                  {/* 身份证 */}
                  <Col span={24}>
                    <Form.Item
                      label="身份证"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Input value={userInfo.ID} />
                    </Form.Item>
                  </Col>
                  {/* 家乡 */}
                  <Col span={24} >
                    <Form.Item
                      label="家乡"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Col span={24} className='EmployeeData_dept_row'>
                        <Input value={userInfo.hometown} />
                      </Col>
                    </Form.Item>
                  </Col>
                  {/* 紧急联系人 */}
                  <Col span={24}>
                    <Form.Item
                      label="紧急联系人"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Col span={24} className='EmployeeData_dept_row'>
                        <Input value={userInfo.EmergencyContact} />
                      </Col>
                    </Form.Item>
                  </Col>
                </Col>
                <Col span={12} className='EmployeeData_right'>
                  {/* 入司时间 */}
                  <Col span={24}>
                    <Form.Item
                      label="入司时间"
                      name="birthday"
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <DatePicker className='birthday_datePicker' defaultValue={moment(userInfo.EnterCompany, 'YYYY/MM/DD')} onChange={handleBirthdayChange} />
                    </Form.Item>
                  </Col>
                  {/* 家庭住址 */}
                  <Col span={24}>
                    <Form.Item
                      label="家庭住址"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Input value={userInfo.ID} />
                    </Form.Item>
                  </Col>
                  {/* 紧急联系人电话 */}
                  <Col span={24}>
                    <Form.Item
                      label="紧急联系人电话"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Input value={userInfo.ID} />
                    </Form.Item>
                  </Col>
                </Col>
              </Row>
              {/* 个人介绍 */}
              <Row className='user_introduce_row'>
                <Col span={24} className='user_introduce_left'>
                  <Form.Item
                    label="个人介绍"
                    name="userAccount"
                    className='user_introduce'
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <TextArea rows={4} placeholder="maxLength is 6" maxLength={10} value={userInfo.introduce} />
                  </Form.Item>
                </Col>
              </Row>
              <Row >
                <Col span={12} className='EmployeeData_left'>
                  {/* 个性签名 */}
                  <Col span={24}>
                    <Form.Item
                      label="个性签名"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Input value={userInfo.ID} />
                    </Form.Item>
                  </Col>
                  {/* 离职状态 */}
                  <Col span={24}>
                    <Form.Item
                      label="离职状态"
                      name="userAccount"
                      className='folding_id'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <Radio.Group onChange={changeDepartureStatus} value={userInfo.departureStatus}>
                        <Radio value={1}>已离职</Radio>
                        <Radio value={2}>未离职</Radio>
                      </Radio.Group>
                    </Form.Item>
                  </Col>
                </Col>
                <Col span={12} className='EmployeeData_right'>
                  {/* 离职时间 */}
                  <Col span={24}>
                    <Form.Item
                      label="离职时间"
                      name="birthday"
                      className='departure_time'
                      rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                      <DatePicker className='birthday_datePicker' defaultValue={moment(userInfo.EnterCompany, 'YYYY/MM/DD')} onChange={handleBirthdayChange} />
                    </Form.Item>
                  </Col>
                </Col>
              </Row>

              {/* 离职原因 */}
              <Row className='user_introduce_row'>
                <Col span={24} className='user_introduce_left'>
                  <Form.Item
                    label="离职原因"
                    name="userAccount"
                    className='user_introduce'
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <TextArea rows={4} placeholder="maxLength is 6" maxLength={10} value={userInfo.introduce} />
                  </Form.Item>
                </Col>
              </Row>
            </>}
          </Col>
        </Row>
      </Form>

    </>
  )
}
